<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>四叶草</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
	.bg{
		position:absolute;
		left: -20%;
		bottom: 80px;
		width:140%;
		height:auto;
	}
    .container{
        position: relative;
        width: 375px;
        height: 100%;
		display: flex;
		margin: 0 auto;
        justify-content: center;
        align-items: center;
    }
	.box{
		position: absolute;
        width:0;
        height: 0;
	}
    .leaf{
        position: absolute;
        left: -100px;
        width: 200px;
        height: 160px;
        bottom: 0;
        transform-origin: 50% 100%;
    }
    .left{
        position: absolute;
        left:0;
        bottom: 0;
        width:50.5%;
        height: 100%;
        overflow: hidden;
    }
    .right{
        position: absolute;
        right:0;
        bottom: 0;
        width:50.5%;
        height: 100%;
        overflow: hidden;
    }
    .left-leaf{
        position: absolute;
        width: 100%;
        height: 90%;
        bottom: 0;
        left: 100%;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        transform-origin: 0 100%;
        transform: rotate(-42deg);
        background: #5fb433;
    }
    .right-leaf{
        position: absolute;
        width: 100%;
        height: 90%;
        bottom: 0;
        left: -100%;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        transform-origin: 100% 100%;
        transform: rotate(42deg);
        background: #5fb433;
    }
	.circle{
		position:absolute;
		left:100px;
		bottom: 100px;
		width:50px;
		height:50px;
		border-radius:50%;
		background:#5fb433;
	}
	.circle-box{
		position:absolute;
		left:100px;
		bottom:100px;
	}
	.line{
		position:absolute;
		left:120px;
		bottom: 85px;
		width:170px;
		height:2px;
		background:#5fb433;
	}
	.arc-left{
		position:absolute;
		width: 80px;
		height:240px;
		border-top: 1px transparent solid;
        border-right: 3px #5fb433 solid;
        border-bottom: 3px transparent solid;
        border-radius: 50%;
	}
	.arc-right{
		position:absolute;
		width: 80px;
		height:240px;
		border-top: 1px transparent solid;
        border-left: 3px #5fb433 solid;
        border-bottom: 3px transparent solid;
        border-radius: 50%;
	}
</style>
<body bgcolor='#FFFFFF'>
<div class="container">
	<div class="box" style='left:80px;bottom:280px;transform: rotate(12deg) scale(.33);'>
        <div class="leaf">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(90deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(180deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(270deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
    </div>
	<div class="box" style='left:176px;bottom:341px;transform: rotate(39deg) scale(.39);'>
        <div class="leaf">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(90deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(180deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(270deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
    </div>
	<div class="box" style='left:181px;bottom:244px;transform: rotate(35deg) scale(.21);'>
        <div class="leaf">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(90deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(180deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(270deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
    </div>
	<div class="box" style='left:260px;bottom:150px;transform: rotate(8deg) scale(.17);'>
        <div class="leaf">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(90deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(180deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(270deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
    </div>
	<div class="box" style='left:181px;bottom:182px;transform: rotate(-3deg) scale(.11);'>
        <div class="leaf">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(90deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(180deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
        <div class="leaf" style="transform:rotate(270deg);">
            <div class="left">
                <div class="left-leaf"></div>
            </div>
            <div class="right">
                <div class="right-leaf"></div>
            </div>
        </div>
    </div>
	<div class='circle-box' style='left: 81px; bottom: 87px; transform: scale(1);'>
		<div class='circle' style='left: 0px; bottom: 0px; transform: scale(.99);' ></div>
		<div class='circle' style='left: -36px; bottom: 40px; transform: scale(.46);' ></div>
		<div class='circle' style='left: -63px; bottom: 73px; transform: scale(.26);' ></div>
		<div class='circle' style='left: -73px; bottom: 105px; transform: scale(.15);' ></div>
	</div>
	<div class='circle-box' style='left: 109px; bottom: 185px; transform: rotate(-30deg) scale(.43);'>
		<div class='circle' style='left: 0px; bottom: 0px; transform: scale(.99);' ></div>
		<div class='circle' style='left: -36px; bottom: 40px; transform: scale(.46);' ></div>
		<div class='circle' style='left: -63px; bottom: 73px; transform: scale(.26);' ></div>
		<div class='circle' style='left: -73px; bottom: 105px; transform: scale(.15);' ></div>
	</div>
	<div class='circle-box' style='left: 87px; bottom: 327px; transform: rotate(-30deg) scale(.43);'>
		<div class='circle' style='left: 0px; bottom: 0px; transform: scale(.99);' ></div>
		<div class='circle' style='left: -30px; bottom: 50px; transform: scale(.46);' ></div>
		<div class='circle' style='left: -53px; bottom: 83px; transform: scale(.26);' ></div>
		<div class='circle' style='left: -73px; bottom: 105px; transform: scale(.15);' ></div>
	</div>
	<div class='circle-box' style='left: 265px; bottom: 272px; transform: rotate(71deg) scale(.7);'>
		<div class='circle' style='left: 0px; bottom: 0px; transform: scale(.99);' ></div>
		<div class='circle' style='left: -30px; bottom: 50px; transform: scale(.46);' ></div>
		<div class='circle' style='left: -53px; bottom: 83px; transform: scale(.26);' ></div>
		<div class='circle' style='left: -73px; bottom: 105px; transform: scale(.15);' ></div>
	</div>
    <div class='line' ></div>
    <div class="arc-left" style="left: 58px;bottom: 51px;transform: rotate(-17deg) scale(.95);"></div>
    <div class="arc-left" style="left: 63px;bottom: 11px;transform: rotate(-30deg) scale(.6);"></div>
    <div class="arc-right" style="left: 151px;bottom: 84px;transform: rotate(0deg) scale(1.17);"></div>
    <div class="arc-right" style="left: 138px;bottom: 33px;transform: rotate(6deg) scale(.7);"></div>
    <div class="arc-right" style="left: 138px;bottom: 10px;transform: rotate(17deg) scale(.5);"></div>
</div>
</body>
</html>